<template>
  <div class="decoration-tabbar min-w-[800px]">
    <el-card
      shadow="never"
      class="!border-none flex-1"
      :body-style="{ height: '100%' }"
    >
      <div class="flex h-full items-start">
        <div class="pages-preview mx-[30px]">
          <div class="tabbar flex">
            <div
              class="tabbar-item flex flex-col justify-center items-center flex-1"
              v-for="(item, index) in tabbar.list"
              :key="index"
              :style="{ color: tabbar.style.defaultColor }"
            >
              <img class="w-[22px] h-[22px]" :src="item.unselected" alt="" />
              <div class="leading-3 text-[12px] mt-[4px]">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="flex-1">
          <div
            class="title flex items-center before:w-[3px] before:h-[14px] before:block before:bg-primary before:mr-2"
          >
            底部导航设置
            <span class="form-tips ml-[10px] !mt-0">
              至少添加2个导航，最多添加5个导航
            </span>
          </div>
          <el-form
            label-width="auto"
            :rules="rules"
            :model="tabbar"
            ref="ruleFormRef"
          >
            <el-tabs model-value="content">
              <el-tab-pane label="导航图片" name="content">
                <div class="mb-[18px]">
                  <draggable
                    class="draggable"
                    v-model="tabbar.list"
                    animation="300"
                    draggable=".draggable"
                    :move="onMove"
                  >
                    <template v-slot:item="{ element, index }">
                      <del-wrap
                        @close="handleDelete(index)"
                        class="max-w-[400px]"
                        :class="{ draggable: index !== 0 }"
                        :showClose="index !== 0"
                      >
                        <div class="bg-fill-light w-full p-4 mt-4">
                          <el-form-item label="导航图标">
                            <material-picker
                              v-model="element.unselected"
                              upload-class="bg-body"
                              size="60px"
                            >
                              <template #upload>
                                <div class="upload-btn w-[60px] h-[60px]">
                                  <icon name="el-icon-Plus" :size="16" />
                                  <span class="text-xs leading-5">
                                    未选中
                                  </span>
                                </div>
                              </template>
                            </material-picker>
                            <material-picker
                              v-model="element.selected"
                              upload-class="bg-body"
                              size="60px"
                            >
                              <template #upload>
                                <div class="upload-btn w-[60px] h-[60px]">
                                  <icon name="el-icon-Plus" :size="16" />
                                  <span class="text-xs leading-5">
                                    选中
                                  </span>
                                </div>
                              </template>
                            </material-picker>
                          </el-form-item>
                          <el-form-item label="导航名称">
                            <el-input
                              v-model="element.name"
                              placeholder="请输入名称"
                              maxlength="4"
                              show-word-limit
                            />
                          </el-form-item>
                          <el-form-item label="链接地址">
                            <link-picker
                              v-model="element.link"
                              :disabled="index === 0"
                            />
                          </el-form-item>
                        </div>
                      </del-wrap>
                    </template>
                  </draggable>
                </div>

                <el-form-item v-if="tabbar.list?.length < max" label-width="0">
                  <el-button type="primary" @click="handleAdd">
                    添加导航
                  </el-button>
                </el-form-item>
              </el-tab-pane>
              <el-tab-pane label="样式设置" name="styles">
                <el-form-item label="默认颜色" required>
                  <div>
                    <el-form-item prop="defaultColor">
                      <div>
                        <color-picker
                          class="max-w-[400px]"
                          v-model="tabbar.style.defaultColor"
                          default-color="#999999"
                        />
                        <div class="form-tips block">
                          导航文本未选中时的颜色
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                </el-form-item>
                <el-form-item label="选中颜色" required>
                  <div>
                    <el-form-item prop="selectedColor">
                      <div>
                        <color-picker
                          class="max-w-[400px]"
                          v-model="tabbar.style.selectedColor"
                          default-color="#EA5455"
                        />
                        <div class="form-tips block">
                          导航文本选中时的颜色
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                </el-form-item>
              </el-tab-pane>
            </el-tabs>
          </el-form>
        </div>
      </div>
    </el-card>
    <footer-btns class="mt-4" :fixed="false" v-perms="['decorate:tabbar:save']">
      <el-button type="primary" @click="setData(ruleFormRef)">保存</el-button>
    </footer-btns>
  </div>
</template>
<script lang="ts" setup>
import { getDecorateTabbar, setDecorateTabbar } from '@/api/decorate'
import feedback from '@/utils/feedback'
import Draggable from 'vuedraggable'
import { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const max = 5
const min = 2
const tabbar = reactive({
  style: {
    defaultColor: '',
    selectedColor: ''
  },
  list: [
    {
      name: '',
      selected: '',
      unselected: '',
      link: {}
    },
    {
      name: '',
      selected: '',
      unselected: '',
      link: {}
    }
  ]
})

const rules = reactive<FormRules>({
  defaultColor: [{ message: 'Please input Activity name', trigger: 'change' }],
  selectedColor: [{ message: 'Please input Activity name', trigger: 'change' }]
})

const handleAdd = () => {
  if (tabbar.list?.length < max) {
    tabbar.list.push({
      name: '',
      selected: '',
      unselected: '',
      link: {}
    })
  } else {
    feedback.msgError(`最多添加${max}个`)
  }
}
const handleDelete = (index: number) => {
  if (tabbar.list?.length <= min) {
    return feedback.msgError(`最少保留${min}个`)
  }
  tabbar.list.splice(index, 1)
}

const onMove = (e: any) => {
  if (e.relatedContext.index == 0) {
    return false
  }
  return true
}

const getData = async () => {
  const data = await getDecorateTabbar()
  tabbar.list = data.list
  tabbar.style = data.style
  tabbar.list.forEach(item => {
    item.link = JSON.parse(item.link)
  })
}
const setData = async () => {
  if (tabbar.style.defaultColor == '' || tabbar.style.selectedColor == '') {
    feedback.msgError('底部导航文字颜色不能为空！')
    return
  }

  await setDecorateTabbar(toRaw(tabbar))
  feedback.msgSuccess('操作成功')
  getData()
}
getData()
</script>
<style lang="scss" scoped>
.decoration-tabbar {
  min-height: calc(100vh - var(--navbar-height) - 80px);
  @apply flex flex-col;
  .pages-preview {
    background-color: #f7f7f7;
    width: 360px;
    height: 615px;
    color: #333;
    position: relative;
    .tabbar {
      position: absolute;
      height: 50px;
      background-color: #fff;
      bottom: 0;
      width: 100%;
      border: 2px solid var(--el-color-primary);
    }
  }
}
</style>
